<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <input type="text" placeholder="百度一下，你就知道" v-focus:abc.smd=" 'hehe' + 'dada' " />
    </div>
    <script src="../vue.js"></script>
    <script>
      // Vue中，所有的指令（内置、自定义），都是以 v- 开头

      // 用 Vue.directive 来自定义指令
      //    第一个参数：指令名称（不包括v-）
      //    第二个参数：配置项
      //          inserted 回调函数（当该指令绑定的元素插入到父节点时，触发 ）
      //          VDOM（虚拟DOM）：用JS对象描述的HTML节点结构
      Vue.directive('focus', {
        // 第一个参数：表示绑定的元素
        inserted(el, { name, value, expression, modifiers, arg }) {
          console.log(name, value, expression, modifiers, arg);
          if (modifiers.smd) {
            alert('思密达！！！');
          }
          el.focus();
        },
      });

      var app = new Vue({
        el: '#app',
      });
    </script>
  </body>
</html>
